import { Menu } from "antd";
import { useNavigate } from 'react-router';

import Router from './router/index';
import './App.css';

// 菜单栏数据
const menuData=[{
  key: '/test',
  label: '测试页面1',
},
{
  key: '/test1',
  label: '测试页面2',
}
]

function App() {
  const navigate = useNavigate();
 
  // 路由跳转
  function handleJump(item){
     navigate(item.key);
  }

  return (
    <div className='app-container'>
      {/* 导航栏 */}
      <div className='app-header'> 
       <div className='app-header-logo'>
        <p>人工智能平台</p>
       </div>
       <Menu
          theme="dark"
          mode="horizontal"
          defaultSelectedKeys={['/test']}
          items={menuData}
          style={{  width: 240 }}
          onClick={(item) => { handleJump(item)}}
        />
      </div> 
     <div className="app-content">
      <Router/>
     </div>
    </div> 
  );
}

export default App;
